<template>
	<view class="wp">
		<view class="shu_title">
			<view class="span"></view>
			<text>选择预定金额</text>
		</view>
		<view class="money_list">
			<view class="item">
				<view class="con on">2000 <text>元</text></view>
			</view>
			<view class="item">
				<view class="con">10000 <text>元</text></view>
			</view>
		</view>
		<view class="chose_moeny">
			<!-- <picker @change="bindPickerChange" :value="index" :range="array">
				<view class="mass">{{index==-1?'选择自定义金额':array[index]}}</view>

			</picker> -->
			<input type="number" placeholder="请输入自定义金额" />
			<text class="dw">万元</text>
		</view>

		<view class="info">
			<view class="shu_title">
				<view class="span"></view>
				<text>详细信息</text>
			</view>
			<view class="h"></view>
			<view class="info_con">
				<view class="top">
					<view class="li">
						<view class="span">存入金额（元）</view>
						<view class="b">2000.00</view>
					</view>
					<view class="li">
						<view class="span">年化收益率</view>
						<view class="b">3%</view>
					</view>
					<view class="li">
						<view class="span">预计收益（元）</view>
						<view class="b">60.00</view>
					</view>
				</view>
				
				<view class="bottom">
					<view class="li">
						<view class="span">2000</view>
						<view class="b">积分</view>
					</view>
					<view class="li">
						<view class="span">2024.05.01</view>
						<view class="b">生效日期</view>
					</view>
					<view class="li">
						<view class="span">2025.05.01</view>
						<view class="b">到期日期</view>
					</view>
				</view>
			</view>
		</view>

		<view class="pay_mode">
			<view class="shu_title">
				<view class="span"></view>
				<text>选择支付方式</text>
			</view>

			<view class="pay">
				<view class="w_change">
					<view class="apply_item chose_item on">
						<view class="left">
							<image mode="widthFix" src="../../static/images/pay1.png"></image>
							<text class="span">微信支付</text>
						</view>
					</view>
					<view class="apply_item chose_item">
						<view class="left">
							<image mode="widthFix" src="../../static/images/pay3.png"></image>
							<text class="span">线下支付</text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="web_food_btn">
			<view class="btn_text">
				<view class="p">应付：<text>2000.00</text></view>
				<view class="span">去付款</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['3000', '4000', '5000'],
				index: -1,
			}
		},
		onLoad() {
			let that = this;

		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
		}
	}
</script>

<style scoped>
	.info {
		margin-top: 30rpx;
	}

	.info_con {
		padding: 26rpx;
		background-color: #fff;
		border-radius: 8px;
	}

	.info .top {padding: 0 26rpx;
		height: 136rpx;text-align: center;
		display: flex;align-items: center;
		justify-content: space-between;
		background-color: #f2f7ff;border-radius: 8px;
	}
	.info .top .span{font-size: 22rpx;color: #999;}
	.info .top .b{font-size: 38rpx;color: #333;margin-top: 12rpx;font-weight: bold;}
	
	
	.info .bottom {padding: 0 26rpx;text-align: center;
		display: flex;align-items: center;margin-top: 30rpx;
		justify-content: space-between;
	}
	.info .bottom .span{font-size:28rpx;color: #333;}
	.info .bottom .b{font-size: 24rpx;color: #999;margin-top: 12rpx;}

	.chose_moeny {
		position: relative;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 8px;
		padding: 20rpx;
		padding-right: 120rpx;
	}

	.chose_moeny .dw {
		position: absolute;
		right: 0rpx;
		font-size: 24rpx;
		color: #000;
		width: 102rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.chose_moeny picker {
		width: 100%;
		height: 64rpx;
		line-height: 62rpx;
		border: 1px solid #e9ebf0;
		border-radius: 8px;
		color: #333;
		padding: 0 20rpx;
		font-size: 24rpx;
		box-sizing: border-box;
	}
	
	
	.chose_moeny input {
		width: 100%;
		height: 64rpx;
		line-height: 62rpx;
		border: 1px solid #e9ebf0;
		border-radius: 8px;
		color: #333;
		padding: 0 20rpx;
		font-size: 24rpx;
		box-sizing: border-box;
	}

	.wp {
		padding-top: 30rpx;
	}

	.money_list {
		margin-left: -20rpx;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.money_list .item {
		width: 50%;
		padding-left: 20rpx;
		float: left;
	}

	.money_list .item .con {
		background-color: #fff;
		border-radius: 8px;
		text-align: center;
		height: 100rpx;
		line-height: 96rpx;
		border: 1px solid #fff;
		font-size: 38rpx;
		color: #000;
	}

	.money_list .item .con.on {
		background-color: #ebf2ff;
		border: 1px solid #227fff;
	}

	.money_list .item .con text {
		font-size: 26rpx;
	}

	.pay_mode {
		margin-top: 30rpx;
	}

	.pay {
		margin-top: 30rpx;
	}

	.pay .w_change {
		background-color: #fff;
		padding: 10rpx 26rpx;
		border-radius: 8px;
	}

	.pay .w_change h3 {
		font-size: 32rpx;
		color: #000;
	}



	.w_change .apply_item {
		overflow: hidden;
		position: relative;
		height: 70rpx;
		margin: 20rpx 0;
	}

	.w_change .apply_item .left {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.w_change .apply_item image {
		width: 44rpx;
		vertical-align: middle;
		margin-right: 6px;
	}

	.w_change .apply_item .span {
		font-size: 11pt;
		color: #333;
		vertical-align: middle;
		margin-right: 6px;
	}


	.w_change .chose_item {
		background-image: url(@/static/images/my16.png);
		background-size: 18px;
		background-repeat: no-repeat;
		background-position: right center;
	}

	.w_change .chose_item.on {
		background-image: url('@/static/images/c_i11.png');
	}
</style>